.member-code {
  padding: 20rpx 30rpx;
}

.avatar-wrapper {
  width: 150rpx;
  height: 150rpx;
  border-radius: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;

  image {
    width: 130rpx;
    height: 130rpx;
    border-radius: 100%;
  }

  .tag {
    background-color: #ffffff;
    position: absolute;
    right: -30rpx;
    bottom: -6rpx;
    display: flex;
    align-items: center;
    color: $color-warning;
    font-size: 22rpx;
    padding: 6rpx 16rpx;
    border-radius: 50rem !important;
    box-shadow: 2rpx 2rpx 20rpx rgba($color: #000000, $alpha: 0.1);

    image {
      width: 26rpx;
    }
  }
}

.user-box {
  width: 100%;
  position: relative;
  border-radius: 8rpx;
  background-color: #ffffff;
  margin-top: -75rpx;
  padding-top: 105rpx;
  padding-bottom: 75rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);

  .user-nickname {
    display: flex;
    justify-content: center;
    margin-bottom: 30rpx;
    font-size: 28rpx;
    font-weight: 700;
  }
}

.user-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  &::after {
    content: ' ';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    border-right: 1rpx solid $text-color-assist;
    transform: scaleX(0.2) scaleY(0.5);
  }

  &:nth-last-child(1)::after {
    border-right: 0;
  }

  .value {
    font-size: $font-size-base;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
}

.wepay-btn {
  background-color: #57b737;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rpx 50rpx;

  image {
    width: 36rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }
}